<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12">
          <q-card>
            <q-card-section>
              <ve-line :data="requestTime" :settings="requestTime.settings"/>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card>
            <q-card-section>
              <ve-pie :data="requestIp" :settings="requestIp.settings"/>
            </q-card-section>
          </q-card>
        </div>
        <div class="col-12">
          <q-card>
            <q-card-section>
              <ve-pie :data="requestDevice" :settings="requestDevice.settings"/>
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
  export default {
    name: "Log",
    data: function () {
      return {
        requestTime: {
          columns: ['Hour', 'Request Count'],
          rows: [],
          settings: {
            yAxisName: 'Hour'
          }
        },
        requestIp: {
          columns: ['IP', 'Request Count'],
          rows: [],
          settings: {
            yAxisName: 'IP'
          }
        },
        requestDevice: {
          columns: ['Device', 'Request Count'],
          rows: [],
          settings: {
            yAxisName: 'Device'
          }
        }
      };
    },
    async mounted() {
      this.$q.loading.show();
      let data = await this.$axios.get('api/log/nginx');
      if (data) {
        if (data.requestTime) {
          data.requestTime.forEach(item => {
            this.requestTime.rows.push({
              'Hour': item.num,
              'Request Count': item.count
            });
          })
        }
        if (data.requestIp) {
          data.requestIp.forEach(item => {
            this.requestIp.rows.push({
              'IP': item.ip,
              'Request Count': item.count
            });
          })
        }
        if (data.requestDevice) {
          data.requestDevice.forEach(item => {
            this.requestDevice.rows.push({
              'Device': item.device,
              'Request Count': item.count
            });
          })
        }
      }
      this.$q.loading.hide();
    }
  }
</script>

<style scoped>

</style>
